<template>
    <div id="personalHomePage">
        <header>
          <div class="title">
                <img src="../../image/icon_retern0.png" alt="" width="33" height="33" @click="goBack()">
          </div>
          <div class="bigImg">
              <img src="../../image/yayibg.png" alt="" style="    position: absolute;width: 100%;height: 100%;
              top: 0px;
              left: 0px;">
              <div>
                  <img :src="userObj.pic?userObj.pic:imgUrl" alt="" width="59" height="59">
              </div>
              <p>{{userObj.username?userObj.username:"用户"+userObj.id}}</p>
          </div>
      </header>
      <div class="nav">
            <div class="active">
                <a class="">
                    <b>我的动态</b>
                </a>
            </div>
            <div>
                <a class="">
                    <b>我的关注</b>
                </a>
            </div>
            <div>
                <a class="">
                    <b>我的粉丝</b>
                </a>
            </div>
        </div>
        <div class="border-5"></div>
        <div class="swiper-container swipe" id="outSwiper">
             <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <my-tidings></my-tidings>
              </div>
              <div class="swiper-slide">
                  <my-concern></my-concern>
              </div>
              <div class="swiper-slide">
                  <my-fun></my-fun>
              </div>
          </div>
      </div>

  </div>
</template>
<script>
  import myTidings from '../../components/personalHomePage/myTidings.vue'
  import myConcern from '../../components/personalHomePage/myConcern.vue'
  import myFun from '../../components/personalHomePage/myFun.vue'
  export default {
      data() {
          return {
              userid: "",
              imgUrl: require("../../image/icon_doctor@2x_03.png"),//默认头像
              userObj: {}, //用户信息
          }
      },
      components: {
          'my-tidings': myTidings,
          'my-concern': myConcern,
          'my-fun': myFun,

      },
      methods: {
          goBack() {
              this.$router.push({path:'/personalInfo'})
          },
          //根据用户id获取用户信息
          getUserData() {
              this.userid = localStorage.getItem("loginMobile");
              this.$api.get(this.$api.baseURLSchool,"select_cid/user/"+this.userid,{},r => {
                  // console.log(r);
                  this.userObj = r.data.info;
              },err => {
                  console.log(err);
              })
          },
      },
      created() {
          this.getUserData();
      },
      mounted() {
          var mySwiper = new Swiper ('#outSwiper', {
              observer:true,
              observeParents:true,
              onSlideChangeStart: function(swiper){
                  var index = swiper.activeIndex;
                  $('.nav div').removeClass();
                     $('.nav div').eq(index).addClass("active");
              }
          });
          $('.nav div').click(function(){
              mySwiper.slideTo($(this).index());
              $(this).addClass('active').siblings().removeClass();
          });
      }
  }
</script>
<style lang="scss" scoped>

</style>
